<script>
  import BodyPartIcon from './BodyPartIcon.svelte';
  const health = {
    head: 0.75,
    body: 0.95,
    larm: 0.90,
    rarm: 1.00,
    lleg: 0.54,
    rleg: 0.31,
  };
  const styles = {
    hunger: '#aa0',
    thirst: '#aa0',
  };
  const descriptions = {
    head: 'You selected head',
    body: 'Body',
    larm: 'Your left arm is fine',
    rarm: 'Your right arm is in perfect shape',
    lleg: 'Your left leg bleeds!',
    rleg: 'Your right leg is heavily damaged!',
  };
  let selected = $state(null);
  let description = $derived(descriptions[selected] ?? '');
  let dynamicStyle = $derived(Object.entries(styles).map(([k, v]) => `--${k}: ${v}`).join(';'));

  const select = (part) => () => {
    if (selected === part) {
      selected = null;
    } else {
      selected = part;
    }
  };
</script>

<section class="stat" style="{dynamicStyle}">
  <pre>
  <BodyPartIcon {health} {selected} {select} part="head">(O)</BodyPartIcon>     ^_^
<BodyPartIcon {health} {selected} {select} part="larm">-\</BodyPartIcon><BodyPartIcon {health} {selected} {select} part="body">/|\</BodyPartIcon><BodyPartIcon {health} {selected} {select} part="rarm">/-</BodyPartIcon>
  <BodyPartIcon {health} {selected} {select} part="body">|=|</BodyPartIcon>    <span class="heart">&lt;3</span> 60 : 120
 <BodyPartIcon {health} {selected} {select} part="lleg">_|</BodyPartIcon> <BodyPartIcon {health} {selected} {select} part="rleg">|_</BodyPartIcon></pre>
  <span class="hunger">Hungry</span>
  <span class="thirst">Thirsty</span>
  <br/>
  {description}
</section>

<style>
  .heart {
    color: #c44;
  }
  .head {
    color: var(--head);
  }
  .body {
    color: var(--body);
  }
  .larm {
    color: var(--larm);
  }
  .rarm {
    color: var(--rarm);
  }
  .lleg {
    color: var(--lleg);
  }
  .rleg {
    color: var(--rleg);
  }
  .hunger {
    color: var(--hunger);
  }
  .thirst {
    color: var(--thirst);
  }
</style>
